// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.mod {
  // the entire mod component is expected to scale to a given height.
  // there are two options for that: either specify every size here against a fixed "reference size" and then scale the entire component in post,
  // or bake a scale into every single size specification of every element of the component.
  // this is implementing the second approach via usage of `font-size` and `em`.
  font-size: var(--mod-height, @mod-height-normal);
  height: 1em;
  display: flex;
  position: relative;

  .mod-type(@name, @colour) {
    &--type-@{name} {
      --type-bg-colour: @colour;

      // cross-reference: https://github.com/ppy/osu/blob/321707590ab51333ce86a0b1198592705603cdb4/osu.Game/Rulesets/UI/ModIcon.cs#L257
      // using `srgb-linear` is intentional here to match https://github.com/ppy/osu-framework/blob/cfb0d7b4b673583f0cf56273e94352769aa5bc9a/osu.Framework/Utils/Interpolation.cs#L252-L258
      --type-fg-colour: color-mix(in srgb-linear, black, @colour 10%);

      // cross-reference: https://github.com/ppy/osu/blob/321707590ab51333ce86a0b1198592705603cdb4/osu.Game/Rulesets/UI/ModIcon.cs#L262
      // and https://github.com/ppy/osu-framework/blob/cfb0d7b4b673583f0cf56273e94352769aa5bc9a/osu.Framework/Graphics/Colour4.cs#L134-L138
      // `.Darken(2.8f)` amounts to dividing every colour component by 1 + 2.8 = 3.8
      // which is the same thing as interpolating between black and @colour at t = 1 / 3.8 ≈ 0.2631578947
      // using `srgb` is intentional because the `.Darken()` helper does no colourspace conversion
      --type-extender-colour: color-mix(in srgb, black, @colour 26.3%);
    }
  }

  .mod-type(Automation, @osu-colour-blue-1);
  .mod-type(Conversion, @osu-colour-purple-1);
  .mod-type(DifficultyIncrease, @osu-colour-red-1);
  .mod-type(DifficultyReduction, @osu-colour-lime-1);
  .mod-type(Fun, @osu-colour-pink-1);
  .mod-type(System, @yellow);

  &--dynamic {
    font-size: 1em;
  }

  &__icon {
    position: relative;
    width: 1.42em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    &::before {
      .full-size();
      background-color: var(--type-bg-colour);
      mask-image: url("~@images/badges/mods/blanks/mod-icon.svg");
      mask-size: contain;
      mask-position: center;
      mask-repeat: no-repeat;
      content: "";
      display: flex;
    }

    &::after {
      .full-size();
      content: attr(data-acronym);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--type-fg-colour);
      font-family: @font-grade;
      font-weight: 900;
      font-size: 0.4em;
    }

    .mod-icon-osu(@acronym, @filename) {
      &--@{acronym}::after {
        content: "";
        background-color: var(--type-fg-colour);
        mask-image: url("~@images/badges/mods/mod-@{filename}.svg");
        mask-position: center;
        mask-size: contain;
        mask-repeat: no-repeat;
        margin: 0;
      }
    }

    .mod-icon-fa() {
      content: "";
      --margin: 0.32em;
      margin: var(--margin);
      width: calc(100% - var(--margin) * 2);
      height: calc(100% - var(--margin) * 2);

      background-color: var(--type-fg-colour);
      mask-size: contain;
      mask-position: center;
      mask-repeat: no-repeat;
    }

    .mod-icon-fas(@acronym, @glyph) {
      &--@{acronym}::after {
        .mod-icon-fa();
        mask-image: url("~@fortawesome/fontawesome-free/svgs/solid/@{glyph}.svg");
      }
    }
    .mod-icon-far(@acronym, @glyph) {
      &--@{acronym}::after {
        .mod-icon-fa();
        mask-image: url("~@fortawesome/fontawesome-free/svgs/regular/@{glyph}.svg");
      }
    }

    .mod-icon-osu(NM, no-mod);

    // below mixin definitions can be autogenerated using `database/mods.json` and
    // $ jq -r '.[].Mods[] | ".mod-icon-osu(\(.Acronym), \(.Name | sub(" ";"-") | ascii_downcase));"' database/mods.json | sort | uniq | pbcopy

    .mod-icon-osu(10K, ten-keys);
    .mod-icon-osu(1K, one-key);
    .mod-icon-osu(2K, two-keys);
    .mod-icon-osu(3K, three-keys);
    .mod-icon-osu(4K, four-keys);
    .mod-icon-osu(5K, five-keys);
    .mod-icon-osu(6K, six-keys);
    .mod-icon-osu(7K, seven-keys);
    .mod-icon-osu(8K, eight-keys);
    .mod-icon-osu(9K, nine-keys);
    .mod-icon-osu(AC, accuracy-challenge);
    .mod-icon-osu(AD, approach-different);
    .mod-icon-osu(AL, alternate);
    .mod-icon-osu(AP, autopilot);
    .mod-icon-osu(AS, adaptive-speed);
    .mod-icon-osu(AT, autoplay);
    .mod-icon-osu(BL, blinds);
    .mod-icon-osu(BM, bloom);
    .mod-icon-osu(BR, barrel-roll);
    .mod-icon-osu(BU, bubbles);
    .mod-icon-osu(CL, classic);
    .mod-icon-osu(CN, cinema);
    .mod-icon-osu(CO, cover);
    .mod-icon-osu(CS, constant-speed);
    .mod-icon-osu(DA, difficulty-adjust);
    .mod-icon-osu(DC, daycore);
    .mod-icon-osu(DF, deflate);
    .mod-icon-osu(DP, depth);
    .mod-icon-osu(DS, dual-stages);
    .mod-icon-osu(DT, double-time);
    .mod-icon-osu(EZ, easy);
    .mod-icon-osu(FF, floating-fruits);
    .mod-icon-osu(FI, fade-in);
    .mod-icon-osu(FL, flashlight);
    .mod-icon-osu(FR, freeze-frame);
    .mod-icon-osu(GR, grow);
    .mod-icon-osu(HD, hidden);
    .mod-icon-osu(HO, hold-off);
    .mod-icon-osu(HR, hard-rock);
    .mod-icon-osu(HT, half-time);
    .mod-icon-osu(IN, invert);
    .mod-icon-osu(MF, moving-fast);
    .mod-icon-osu(MG, magnetised);
    .mod-icon-osu(MR, mirror);
    .mod-icon-osu(MU, muted);
    .mod-icon-osu(NC, nightcore);
    .mod-icon-osu(NF, no-fail);
    .mod-icon-osu(NR, no-release);
    .mod-icon-osu(NS, no-scope);
    .mod-icon-osu(PF, perfect);
    .mod-icon-osu(RD, random);
    .mod-icon-osu(RP, repel);
    .mod-icon-osu(RX, relax);
    .mod-icon-osu(SD, sudden-death);
    .mod-icon-osu(SG, single-tap);
    .mod-icon-osu(SI, spin-in);
    .mod-icon-osu(SO, spun-out);
    .mod-icon-osu(SR, simplified-rhythm);
    .mod-icon-osu(ST, strict-tracking);
    .mod-icon-osu(SV2, score-v2);
    .mod-icon-osu(SW, swap);
    .mod-icon-osu(SY, synesthesia);
    .mod-icon-osu(TC, traceable);
    .mod-icon-osu(TD, touch-device);
    .mod-icon-osu(TP, target-practice);
    .mod-icon-osu(TR, transform);
    .mod-icon-osu(WD, wind-down);
    .mod-icon-osu(WG, wiggle);
    .mod-icon-osu(WU, wind-up);
  }

  &__customised-indicator {
    .fas();
    .center-content();
    width: 0.35em;
    height: 0.35em;
    border-radius: 50%;
    background-color: var(--type-fg-colour);
    position: absolute;
    left: 1.05em;
    top: -0.125em;

    &::after {
      content: @fa-var-cog;
      color: var(--type-bg-colour);
      font-size: 0.2em;
    }
  }

  &__extender {
    width: 2.2em;
    background-color: var(--type-extender-colour);
    mask-image: url("~@images/badges/mods/blanks/mod-icon-extender.svg");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    margin-left: -0.5em;
    padding-left: 0.5em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--type-bg-colour);
    // slight adjustments for small sizes
    padding-right: 3px;
    padding-bottom: 1px;

    span {
      font-size: 0.5em;
    }
  }
}
